'use client'
import React, { useCallback } from 'react'
import { useDropzone } from 'react-dropzone'
import { useMutation } from '@tanstack/react-query'
import axios from 'axios'
import { AttachFile } from '@mui/icons-material';

const UploadContainer = () => {
  const mutation = useMutation({
    mutationFn: (file: File) => {
      const formData = new FormData();
      formData.append('file', file);
      return axios.post('/api/upload', formData)
    }
  })

  const onDrop = useCallback((acceptedFiles: File[]) => {
    mutation.mutate(acceptedFiles[0])
  }, [])
  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: {
      'application/pdf': ['.pdf']
    }
  })

  return (
    <div className="h-full flex items-center">
      <div
        {...getRootProps()}
        className="w-10 h-10 flex items-center justify-center bg-gray-100 rounded-md cursor-pointer hover:bg-gray-200 transition-colors border border-gray-300"
      >
        <input {...getInputProps()} />
        <AttachFile className="w-5 h-5 text-gray-500" />
      </div>
    </div>
  )
}

export default UploadContainer